// ============================================================================
// 加载动画组件
// ============================================================================

import React from 'react'

interface LoadingSpinnerProps {
  size?: 'small' | 'medium' | 'large'
  className?: string
  text?: string
}

/**
 * 加载动画组件
 */
export function LoadingSpinner({ 
  size = 'medium', 
  className = '', 
  text 
}: LoadingSpinnerProps) {
  const sizeClasses = {
    small: 'w-4 h-4',
    medium: 'w-8 h-8',
    large: 'w-12 h-12'
  }

  return (
    <div className={`flex flex-col items-center justify-center ${className}`}>
      <div
        className={`${sizeClasses[size]} border-2 border-gray-200 dark:border-gray-700 border-t-blue-600 rounded-full animate-spin`}
      />
      {text && (
        <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
          {text}
        </p>
      )}
    </div>
  )
}

/**
 * 页面级加载组件
 */
export function PageLoading({ text = '加载中...' }: { text?: string }) {
  return (
    <div className="flex items-center justify-center h-64">
      <LoadingSpinner size="large" text={text} />
    </div>
  )
}

/**
 * 按钮加载状态
 */
export function ButtonSpinner({ className = '' }: { className?: string }) {
  return (
    <LoadingSpinner 
      size="small" 
      className={`inline-flex ${className}`}
    />
  )
}
